<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible"
				   width="1000px" top="5vh"
				   :before-close="handleClose"
				   :close-on-click-modal="false"
				   append-to-body>
			<div class="tab">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>基础信息</span>
					</div>
					<el-form ref="form" :rules="rules" :model="form" label-width="100px">
						<el-row :gutter="12">
							<el-col :span="8">
								<el-form-item label="任务名称" prop="task_name">
									<el-input v-model="form.task_name"  placeholder="请输入任务名称"></el-input>
								</el-form-item>
								<el-form-item label="任务类型" prop="task_type">
									<el-select v-model="form.task_type"  placeholder="请选择任务类型" style="width:100%;" >
										<el-option
											v-for="item in tasktypeOptions"
											:key="item.index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="套件地址" prop="test_suite_url">
									<el-input v-model="form.test_suite_url" placeholder="请输入套件地址"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="测试人员" prop="tester">
									<el-select v-model="form.tester" placeholder="请选择测试人员" multiple
											   style="width:100%;" value-key="id">
										<el-option
											v-for="(item,index) in testerOptions"
											:key="index"
											:label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="Android版本" prop="android_version">
									<el-input v-model="form.android_version" placeholder="请输入Android版本"></el-input>
								</el-form-item>
								<el-form-item label="固件版本" prop="firmware_version">
									<el-input v-model="form.firmware_version" placeholder="请输入固件版本"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="人力需求" prop="manpower">
									<el-input type="number" v-model="form.manpower" :precision="2" :step="0.1" :min="0"
											  placeholder="请输入人力需求"></el-input>
								</el-form-item>

								<el-form-item label="ios版本" prop="ios_version">
									<el-input v-model="form.ios_version" placeholder="请输入ios版本"></el-input>
								</el-form-item>
								<el-form-item label="插件版本" prop="unit_version">
									<el-input v-model="form.unit_version" placeholder="请输入插件版本"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col>
								<el-form-item label="测试区域" prop="remark">
									<el-input v-model="form.remark" type="textarea" placeholder="请输入测试区域"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col>
								<el-form-item label="任务时间" >
									<el-date-picker
										v-model="form.server"
										type="datetimerange"
										:picker-options="pickerOptions"
										range-separator="至"
										start-placeholder="任务开始时间"
										end-placeholder="任务结束时间"
										style="width: 100%;"
										@change="dataChange"
										align="right">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col>
								<el-form-item label="附件文档">
									<el-upload
										class="upload-demo"
										action="string"
										:headers="headers"
										:http-request="uploadFile"
										:on-remove="deleteFile"
										:before-upload="beforeUpload">
										<el-button size="small" type="primary">附件上传</el-button>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</div>
			<div style="margin-top: 10px;">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>测试样例选择</span>
					</div>
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="IoT产品通用" name="first">
							<div class="testCase">
								<div>IoT产品通用用例列表</div>
								<div class="taskL">
									<el-table
										v-if="initTableList"
										class="marT"
										:data="initTableList"
										:border="true"
										:header-cell-style="{background:'#eef1f6'}"
										lazy
										@selection-change="iot_commonChange"
										row-key="id">
										<el-table-column type="selection" align="center" style="width: 55px;">
										</el-table-column>
										<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
										<el-table-column align="center" property="priority" label="优先级" width="100"></el-table-column>
										<el-table-column align="center" property="test_type" label="测试类型" width="100"></el-table-column>
										<el-table-column align="center" property="status_show" label="状态"></el-table-column>
										<el-table-column align="center" property="task_cases" label="测试记录" >
											<template slot-scope="scope">
									<span v-for="(item,index) in scope.row.task_cases" :key="index">
										<el-popover effect="dark" placement="top" trigger="hover">
											<div style="overflow: auto;">
												<div style="padding: 10px;" >
												<div v-if="item.status == 0">
													<span>测试人：{{item.tester_show || '暂无'}}</span><br/>
						　							 <span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
												<div v-if="item.status != 0">
													<span>测试人：{{item.tester_show['name'] || '暂无'}}</span><br/>
													<span>状  态：{{item.status_show || '暂无'}}</span><br/>
													<span :class="item.result == 'PASS'?'pass':'fail'">结  果：{{item.result || '暂无'}}</span><br/>
							　						<span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
											</div>
											</div>
											<el-button slot="reference" type="primary" size="mini" style="margin: 5px;" plain v-if="item.status == 0">待测试</el-button>
											<el-button slot="reference" :type="item.result == 'FAIL'?'danger':'success'" size="mini" style="margin: 5px;" plain v-if="item.status != 0">{{item.result}}</el-button>
										</el-popover>
									</span>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="品类通用" name="second">
							<div class="testCase">
								<div>品类通用用例列表</div>
								<div class="taskL">
									<el-table
										v-if="commonList"
										class="marT"
										:data="commonList"
										:border="true"
										:header-cell-style="{background:'#eef1f6'}"
										lazy
										@selection-change="commonChange"
										row-key="id">
										<el-table-column type="selection" align="center" style="width: 55px;">
										</el-table-column>
										<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
										<el-table-column align="center" property="priority" label="优先级" width="100"></el-table-column>
										<el-table-column align="center" property="test_type" label="测试类型" width="100"></el-table-column>
										<el-table-column align="center" property="status_show" label="状态"></el-table-column>
										<el-table-column align="center" property="task_cases" label="测试记录" >
											<template slot-scope="scope">
									<span v-for="(item,index) in scope.row.task_cases" :key="index">
										<el-popover effect="dark" placement="top" trigger="hover">
											<div style="overflow: auto;">
												<div style="padding: 10px;" >
												<div v-if="item.status == 0">
													<span>测试人：{{item.tester_show || '暂无'}}</span><br/>
						　							 <span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
												<div v-if="item.status != 0">
													<span>测试人：{{item.tester_show['name'] || '暂无'}}</span><br/>
													<span>状  态：{{item.status_show || '暂无'}}</span><br/>
													<span :class="item.result == 'PASS'?'pass':'fail'">结  果：{{item.result || '暂无'}}</span><br/>
							　						<span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
											</div>
											</div>
											<el-button slot="reference" type="primary" size="mini" style="margin: 5px;" plain v-if="item.status == 0">待测试</el-button>
											<el-button slot="reference" :type="item.result == 'FAIL'?'danger':'success'" size="mini" style="margin: 5px;" plain v-if="item.status != 0">{{item.result}}</el-button>
										</el-popover>
									</span>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="品类特有" name="third">
							<div class="testCase">
								<div>品类特有用例列表</div>
								<div class="taskL">
									<el-table
									v-if="specificList"
									class="marT"
									:data="specificList"
									:border="true"
									:header-cell-style="{background:'#eef1f6'}"
									lazy
									@selection-change="specificChange"
									row-key="id">
									<el-table-column type="selection" align="center" style="width: 55px;">
									</el-table-column>
									<el-table-column align="center" property="case_name" label="用例标题" width="300"></el-table-column>
									<el-table-column align="center" property="priority" label="优先级" width="100"></el-table-column>
									<el-table-column align="center" property="test_type" label="测试类型" width="100"></el-table-column>
									<el-table-column align="center" property="status_show" label="状态"></el-table-column>
									<el-table-column align="center" property="task_cases" label="测试记录" >
										<template slot-scope="scope">
									<span v-for="(item,index) in scope.row.task_cases" :key="index">
										<el-popover effect="dark" placement="top" trigger="hover">
											<div style="overflow: auto;">
												<div style="padding: 10px;" >
												<div v-if="item.status == 0">
													<span>测试人：{{item.tester_show || '暂无'}}</span><br/>
						　							 <span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
												<div v-if="item.status != 0">
													<span>测试人：{{item.tester_show['name'] || '暂无'}}</span><br/>
													<span>状  态：{{item.status_show || '暂无'}}</span><br/>
													<span :class="item.result == 'PASS'?'pass':'fail'">结  果：{{item.result || '暂无'}}</span><br/>
							　						<span>更新时间：{{getTime(item.update_time)}}</span>
												</div>
											</div>
											</div>
											<el-button slot="reference" type="primary" size="mini" style="margin: 5px;" plain v-if="item.status == 0">待测试</el-button>
											<el-button slot="reference" :type="item.result == 'FAIL'?'danger':'success'" size="mini" style="margin: 5px;" plain v-if="item.status != 0">{{item.result}}</el-button>
										</el-popover>
									</span>
										</template>
									</el-table-column>
								</el-table>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {orderOptions, groupId, orderIdTask, orderIdCase} from '@/api/user'
import axios from "axios";
export default {
	name: 'addForm',
	components:{
	},
	data(){
		return {
			commonType:'iot_common',
			activeName:'first',
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{
				doc:[]
			},
			id:'',
			rules:{
				task_name:[
					{max: 50, message: '任务名称不能超过50个字符', trigger: 'blur'},
					{required: true, message: '请输入任务名称', trigger: 'blur'}
					],
				android_version:[{max: 36, message: 'Android版本不能超过36个字符', trigger: 'blur'}],
				ios_version:[{max: 36, message: 'ios版本不能超过36个字符', trigger: 'blur'}],
				unit_version:[{max: 36, message: '插件版本不能超过36个字符', trigger: 'blur'}],
				firmware_version:[{max: 36, message: '固件版本不能超过36个字符', trigger: 'blur'}],
				test_suite_url:[{max: 150, message: '套件地址不能超过150个字符', trigger: 'blur'}],
				remark:[{max: 100, message: '测试区域不能超过100个字符', trigger: 'blur'}],
				task_type:[{required: true, message: '请选择任务类型', trigger: 'change' }],
				tester: [{ required: true, message: '请选择测试人员', trigger: 'change' }],
				manpower:[
						{required: true, message: '请输入人力需求', trigger: 'change'}
					]
			},
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			options:{},
			num:1,
			dataId:'',
			title:'新增测试任务',
			tasktypeOptions:[],
			testerOptions:[],
			initTableList:[], //  IoT产品通用用例列表
			commonList:[],    //  品类通用用例列表
			specificList:[],  //  品类特有用例列表

			sureList:[],  // 被选中的IoT产品通用测试用例
			commonsureList:[], // 被选中的品类通用测试用例
			specificsureList:[],  // 被选中的品类特有测试用例
		}
	},
	created() {

	},
	methods:{
		//切换用例标签页
		handleClick(){
			if(this.activeName == 'first'){
				this.commonType = 'iot_common'
			}
			if(this.activeName == 'second'){
				this.commonType = 'common'
			}if(this.activeName == 'third'){
				this.commonType = 'specific'
			}
		},
		deleteFile(file, fileList) {
			this.$message.success("成功移除!")
			this.form.doc.forEach((item,index) => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					if(index != 0){
						this.form.doc.splice(index,index)
					}else {
						this.form.doc = []
					}
				}
			})
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		//上传附件
		uploadFile(file) {
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/file`
			let fd = new FormData();
			fd.append('file',file.file);
			axios({
				url:url,
				data: fd,
				method:'post',
			}).then(res => {
				if(res.data.code === 200) {
					this.$message.success("上传成功!")
					this.form.doc.push(res.data.data.key)
				}
			})
		},
		testList(){
			this.$refs.taskList.taskListVisible = true
			this.$refs.taskList.initData(this.initTableList)
		},
		dataChange(e){
			this.form.start_time = e[0]
			this.form.end_time = e[1]
		},
		iot_commonChange(evl){
			this.sureList = evl
		},
		commonChange(evl){
			this.commonsureList = evl
		},
		specificChange(evl){
			this.specificsureList = evl
		},

		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.initTableList = []
			this.tasktypeOptions = []
			this.testerOptions = []
			this.sureList = []
		},
		add(form){
			let idList = []
			this.sureList.filter(item => {
				idList.push(item['id'])
			})
			this.commonsureList.filter(item => {
				idList.push(item['id'])
			})
			this.specificsureList.filter(item => {
				idList.push(item['id'])
			})
			this.$refs[form].validate((valid) => {
				if (valid) {
					if(idList.length != 0){
						this.form.case_ids = idList
						orderIdTask(this.form,this.id).then(res => {
							if(res.status == 'success'){
								this.dialogFormVisible = false
								this.$message.success('新增成功！')
								this.$parent.initData(this.id)
								this.$parent.brush()

							}else {
								this.$message.error('新增失败！')
								this.dialogFormVisible = false
							}
						})
					}else {
						this.$message.error('测试用例不能为空！')
					}
					this.form = {}
					this.initTableList = []
					this.tasktypeOptions = []
					this.testerOptions = []
					this.sureList = []
				} else {
					return false;
				}
			});


		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		// 测试组里的组员
		testPerson(argm){
			groupId(argm.group['id']).then(res => {
				this.testerOptions = res.data.tester
			})
		},
		initData(argm){
			let iot_common = []
			let common = []
			let specific = []

			this.$set(this.form, 'tester', [])

			this.id = argm._id

			orderOptions().then(res => {
				var data = res.data

				data.test_types.forEach(item => {
					this.tasktypeOptions.push({name:item})
				})

				this.testPerson(argm)
			})

			orderIdCase(this.id).then(res => {
				res.data.forEach(item => {
					if(item.type == 'common'){
						common.push(item)
					}
					if(item.type == 'iot_common'){
						iot_common.push(item)
					}
					if(item.type == 'specific'){
						specific.push(item)
					}
				})
				this.initTableList = iot_common  //  IoT产品通用用例列表
				this.commonList = common    //  品类通用用例列表
				this.specificList = specific  //  品类特有用例列表
			})
		}
	}

}
</script>

<style lang="scss" scoped>
.role{

}
.step{
	margin: 10px 0;
}
.taskL{
	margin-top: 22px;
	border-top: 1px solid #eee;
	padding-top: 10px;
	height: 430px;
	overflow:auto;
}
.pass{
	color: green;
}
.fail{
	color: red;
}
</style>
